<template>
  <div class="common-layout container">
    <el-container>
      <el-aside width="200px">
        <el-menu
          class="el-menu-demo"
          mode="vertical"
          bg-color="#fff"
          active-text-color="#fa3684"
          router="true"
        >
          <el-sub-menu>
            <template #title style="width: 170px"
              ><span class="message">消息</span></template
            >

            <el-menu-item index="/exchange/systemNote">系统通知</el-menu-item>
            <el-menu-item index="/exchange/InteractNote">互动通知</el-menu-item>
            <el-menu-item index="/exchange/OrderNote">订单通知</el-menu-item>
            
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header
          ><el-card shadow="never" :body-style="{ padding: '20px' }">
            <router-view></router-view>
          </el-card>
        </el-header>
        <el-main>
          <el-card shadow="never" :body-style="{ padding: '20px' }">
            <div class="img">
              <img src="./images/暂无更多数据.png" alt="无更多数据" />
            </div>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
  <router-view></router-view>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Exchange",
});
</script>

<script setup lang="ts"></script>

<style scoped lang="less">
.img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  min-height: 600px;
}
.message {
  font-size: 16px;
}
.message::before {
  background-color: #f93684;
  content: " ";
  position: absolute;
  width: 4px;
  height: 37px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color 0.3s ease;
}
</style>
